<template>
  <section class="min-h-screen relative">
    <div class="container mx-auto">
      <div class="h-screen grid place-items-center">
        <div
          class="absolute left-0 top-0 w-full h-screen bg-center bg-no-repeat bg-cover"
          style="background-image: url('/background-main.jpg')"
        />
        <div class="md:z-bg-box px-4 z-10 flex-row md:flex">
          <div class="flex items-center mb-4 relative">
            <figure
              class="md:flex rounded-xl overflow-hidden p-8 md:p-0 z-10 backdrop-filter backdrop-blur-md"
            >
              <img
                class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto object-cover"
                :src="me"
              />

              <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
                <p class="text-light-500">
                  大家好，我是
                  <span class="font-semibold">曾隼</span>
                  。一名来自江西南昌的程序员和教员。 目前从事
                  <span class="text-gray-200">计算机编程的教学工作</span>
                  。
                </p>
                <!-- <blockquote class="bg-gray-100 p-4 rounded-xl">
                  <p class="text-base font-semibold">
                    悔恨自己的错误，而且力求不再重蹈覆辙，这才是真正的悔悟。
                    <br />
                    优于别人，并不高贵。真正的高贵应该是优于过去的自己。
                  </p>
                  <div class="text-cyan-600">海明威 - 《真实的高贵》</div>
                  <div class="text-gray-500">1899年7月21日－1961年7月2日</div>
                </blockquote> -->
                <figcaption class="font-medium"></figcaption>
              </div>
            </figure>
          </div>

          <div
            class="flex flex-col overflow-hidden rounded-lg shadow-xl relative h-96 md:-left-8"
          >
            <div class="flex-none border-b border-gray-500/30 bg-gray-800">
              <div class="flex items-center h-8 space-x-1.5 px-3">
                <div class="w-2.5 h-2.5 bg-orange-500 rounded-full"></div>
                <div class="w-2.5 h-2.5 bg-yellow-500 rounded-full"></div>
                <div class="w-2.5 h-2.5 bg-green-500 rounded-full"></div>
              </div>
            </div>
            <p
              class="text-gray-200 bg-gray-800 font-mono p-2 text-sm overflow-y-scroll scroll-container"
            >
              16:23:24 ❯ os
              <br />
              osx linux windows
              <br />
              <br />
              17:50:12 ❯ language
              <br />
              汉语 C Basic Pascal Delphi HTML XML SQL Python Java C# JavaScript
              TypeScript Go Rust ... English
              <br />
              <span class="text-red-500">error:</span>
              哪里有把自然语言和计算机语言混为一谈的？！啥都不是
              <span class="text-emerald-300">):</span>
              <br />
              <br />
              17:54:22 ❯ technique
              <br />
              ...full-stack
              <br />
              <span class="text-red-500">error:</span>
              三个点是几个意思？ES6的展开运算符？你是打算展开 full-stack
              这个对象吗？
              <span class="text-emerald-300">): again</span>
              <br />
              <br />
              18:24:22 ❯ database
              <br />
              postgresql mysql mssql redis
              <br />
              <br />
              18:24:22 ❯ frameworks
              <br />
              django flask peewee starlette tortoise-orm express koa prisma
              sequelize gin gorm ent extjs vue react svelte ...
              <br />
              antd element-plus naive-ui axios ...
              <br />
              <span class="text-red-500">error:</span>
              问你会哪些框架，把UI库也扯上干啥？就知道装，，，忍你好久了！
              <span class="text-emerald-300">): again</span>
              <br />
              <br />
            </p>
          </div>
        </div>
      </div>

      <div class="h-96 grid items-center">
        <div class="flex px-4">
          <div class="w-1/2">
            <div v-loading="show">
              <span class="text-orange-600 text-3xl">Design is life</span>
              <h3>设计是一种生活态度</h3>
              <p>设计对于程序和Web虽然存在</p>
            </div>
            <div
              class="dodo_progress wow"
              data-wow-duration="1s"
              style="
                visibility: visible;
                animation-duration: 1s;
                animation-name: fadeInUp;
              "
            >
              <div class="progress_inner" data-value="85" data-color="#f75023">
                <span>
                  <span class="label opened">TypeScript</span>
                  <span class="number" style="right: 15%">85%</span>
                </span>
                <div class="background">
                  <div class="bar open">
                    <div
                      class="bar_in"
                      style="width: 85%; background-color: rgb(247, 80, 35)"
                    ></div>
                  </div>
                </div>
              </div>
              <div class="progress_inner" data-value="95" data-color="#1cbe59">
                <span>
                  <span class="label opened">HTML / CSS</span>
                  <span class="number" style="right: 5%">95%</span>
                </span>
                <div class="background">
                  <div class="bar open">
                    <div
                      class="bar_in"
                      style="width: 95%; background-color: rgb(28, 190, 89)"
                    ></div>
                  </div>
                </div>
              </div>
              <div class="progress_inner" data-value="75" data-color="#8067f0">
                <span>
                  <span class="label opened">Vue</span>
                  <span class="number" style="right: 25%">75%</span>
                </span>
                <div class="background">
                  <div class="bar open">
                    <div
                      class="bar_in"
                      style="width: 75%; background-color: rgb(128, 103, 240)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="bg-white dark:bg-gray-800 rounded-tl-xl sm:rounded-t-xl p-4 pb-6 sm:p-8 lg:p-4 lg:pb-6 xl:p-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8"
      >
        <div
          class="flex items-center space-x-3.5 sm:space-x-5 lg:space-x-3.5 xl:space-x-5"
        >
          <img
            src=""
            alt=""
            width="160"
            height="160"
            class="flex-none w-20 h-20 rounded-lg bg-gray-100"
          />
          <div class="min-w-0 flex-auto space-y-0.5">
            <p
              class="text-lime-600 dark:text-lime-400 text-sm sm:text-base lg:text-sm xl:text-base font-semibold uppercase"
            >
              <abbr title="Episode">Ep.</abbr>
              128
            </p>
            <h2
              class="text-black dark:text-white text-base sm:text-xl lg:text-base xl:text-xl font-semibold truncate"
            >
              Scaling CSS at Heroku with Utility Classes
            </h2>
            <p
              class="text-gray-500 dark:text-gray-400 text-base sm:text-lg lg:text-base xl:text-lg font-medium"
            >
              Full Stack Radio
            </p>
          </div>
        </div>
        <div class="space-y-2">
          <div class="bg-gray-200 dark:bg-black rounded-full overflow-hidden">
            <div
              class="bg-lime-500 dark:bg-lime-400 w-1/2 h-1.5"
              role="progressbar"
              aria-valuenow="1456"
              aria-valuemin="0"
              aria-valuemax="4550"
            ></div>
          </div>
          <div
            class="text-gray-500 dark:text-gray-400 flex justify-between text-sm font-medium tabular-nums"
          >
            <div>24:16</div>
            <div>75:50</div>
          </div>
        </div>
      </div>
      <div
        class="bg-gray-50 text-black dark:bg-gray-900 dark:text-white lg:rounded-b-xl py-4 px-1 sm:px-3 lg:px-1 xl:px-3 grid grid-cols-5 sm:grid-cols-7 lg:grid-cols-5 xl:grid-cols-7 items-center"
      >
        <button type="button" class="mx-auto">
          <svg width="24" height="24" fill="none">
            <path
              d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <button
          type="button"
          class="hidden sm:block lg:hidden xl:block mx-auto"
        >
          <svg width="17" height="18">
            <path d="M0 0h2v18H0V0zM4 9l13-9v18L4 9z" fill="currentColor" />
          </svg>
        </button>
        <button type="button" class="mx-auto">
          <svg width="34" height="39" fill="none">
            <path
              d="M12.878 26.12c1.781 0 3.09-1.066 3.085-2.515.004-1.104-.665-1.896-1.824-2.075v-.068c.912-.235 1.505-.95 1.5-1.93.005-1.283-1.048-2.379-2.727-2.379-1.602 0-2.89.968-2.932 2.387h1.274c.03-.801.784-1.287 1.64-1.287.892 0 1.475.541 1.471 1.346.004.844-.673 1.398-1.64 1.398h-.738v1.074h.737c1.21 0 1.91.614 1.91 1.491 0 .848-.738 1.424-1.765 1.424-.946 0-1.683-.486-1.734-1.262H9.797c.055 1.424 1.317 2.395 3.08 2.395zm7.734.025c2.016 0 3.196-1.645 3.196-4.504 0-2.838-1.197-4.488-3.196-4.488-2.003 0-3.196 1.645-3.2 4.488 0 2.855 1.18 4.5 3.2 4.504zm0-1.138c-1.18 0-1.892-1.185-1.892-3.366.004-2.174.716-3.371 1.892-3.371 1.172 0 1.888 1.197 1.888 3.37 0 2.182-.712 3.367-1.888 3.367z"
              fill="currentColor"
            />
            <path
              d="M1 22c0 8.837 7.163 16 16 16s16-7.163 16-16S25.837 6 17 6"
              stroke="currentColor"
              stroke-width="1.5"
            />
            <path d="M17 0L9 6l8 6V0z" fill="currentColor" />
          </svg>
        </button>
        <button type="button" class="mx-auto">
          <svg width="50" height="50" fill="none">
            <circle
              class="text-gray-300 dark:text-gray-500"
              cx="25"
              cy="25"
              r="24"
              stroke="currentColor"
              stroke-width="1.5"
            />
            <path d="M18 16h4v18h-4V16zM28 16h4v18h-4z" fill="currentColor" />
          </svg>
        </button>
        <button type="button" class="mx-auto">
          <svg width="34" height="39" fill="none">
            <path
              d="M12.878 26.12c1.781 0 3.09-1.066 3.085-2.515.004-1.104-.665-1.896-1.824-2.075v-.068c.912-.235 1.505-.95 1.5-1.93.005-1.283-1.048-2.379-2.727-2.379-1.602 0-2.89.968-2.932 2.387h1.274c.03-.801.784-1.287 1.64-1.287.892 0 1.475.541 1.471 1.346.004.844-.673 1.398-1.64 1.398h-.738v1.074h.737c1.21 0 1.91.614 1.91 1.491 0 .848-.738 1.424-1.765 1.424-.946 0-1.683-.486-1.734-1.262H9.797c.055 1.424 1.317 2.395 3.08 2.395zm7.734.025c2.016 0 3.196-1.645 3.196-4.504 0-2.838-1.197-4.488-3.196-4.488-2.003 0-3.196 1.645-3.2 4.488 0 2.855 1.18 4.5 3.2 4.504zm0-1.138c-1.18 0-1.892-1.185-1.892-3.366.004-2.174.716-3.371 1.892-3.371 1.172 0 1.888 1.197 1.888 3.37 0 2.182-.712 3.367-1.888 3.367z"
              fill="currentColor"
            />
            <path
              d="M33 22c0 8.837-7.163 16-16 16S1 30.837 1 22 8.163 6 17 6"
              stroke="currentColor"
              stroke-width="1.5"
            />
            <path d="M17 0l8 6-8 6V0z" fill="currentColor" />
          </svg>
        </button>
        <button
          type="button"
          class="hidden sm:block lg:hidden xl:block mx-auto"
        >
          <svg width="17" height="18" viewBox="0 0 17 18" fill="none">
            <path d="M17 0H15V18H17V0Z" fill="currentColor" />
            <path d="M13 9L0 0V18L13 9Z" fill="currentColor" />
          </svg>
        </button>
        <button
          type="button"
          class="mx-auto border border-gray-300 rounded-md text-sm font-medium py-0.5 px-2 text-gray-500 dark:border-gray-600 dark:text-gray-400"
        >
          1.0x
        </button>
      </div>
    </div>
  </section>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import me from "../assets/me.jpg";

const show = ref(false);

// const toggle = () => (show.value = !show.value);
</script>
<style>
.scroll-container::-webkit-scrollbar {
  width: 6px;
  color: #999;
}
.scroll-container::-webkit-scrollbar-thumb {
  /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); */
  background: #999;
  width: 2px;
}
</style>
